<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- react底层核心库 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- react操作DOM的核心库，类似于jquery -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
</head>
<body>
    <!-- 
        react渲染三步走
        1、定义一个容器，存放虚拟DOM
        2、创建虚拟DOM元素
        3、把虚拟DOM元素渲染到页面上
     -->
     <div id="root1"></div>
     <div id="root2"></div>
     <script>
        //ES5方法创建
        var element = React.createElement('li',{},'hello')//标签，标签属性（null或{}），标签内容
        ReactDOM.render(element,document.getElementById('root1'))

        //如果有多层嵌套的关系
        var li1 = React.createElement('li',null,111);
        var li2 = React.createElement('li',{className:'list-li'},'2222');
        var _ul = React.createElement('ul',{id:'list'},li1,li2);

        ReactDOM.render(_ul,document.getElementById('root2'))
     </script>
    
</body>
</html>